<template>
  <div style="background-color: #f2f3f5;height: 1560px;">
    <div class="doctor_main">
      <div class="doctor_header">
        <!--医生介绍-->
        <div class="doctor-card-wrapper">
          <div  class="doctor-introduction">
            <div class="doctor-name"> {{ doctor.doctor_info.name }} </div>
            <div class="doctor-section">
              <span>{{ doctor.doctor_info.department_name }}</span>
              <span>{{ doctor.doctor_info.get_title_display }}</span>
            </div>
            <div class="doctor-hospital">
              <span class="doctor-hospital-tag"> {{ doctor.doctor_info.hospital_level }} </span>
              <span>{{ doctor.doctor_info.hospital_name }}</span>
            </div>
          </div>
          <!--医生头像-->
          <div class="doctor-avatar">
            <div class="dxd-avatar" style="width: 60px; height: 60px;">
              <img src="../../assets/doctor/doctor.png" style="display: none;">
              <img :src="doctor.doctor_info.avatar">
              <!---->
            </div>
            <div class="doctor-avatar-follow active"> 关注 </div>
          </div>
          <!--医生简介-->
          <div class="doctor-description">
            <div class="doctor-description-abstract">{{ doctor.doctor_info.profile }}</div>
            <img src="../../assets/向右箭头.png" class="icon-font icon-ic_arrow_little doctor-description-arrow">
          </div>
        </div>
      </div>
      <!--医生简介-->
      <div class="doctor-info">
        <div class="doctor-info-item">
          <div class="vux-rater">
            <a class="vux-rater-box" style="color: rgb(255, 170, 0); margin-right: 2px; font-size: 16px; width: 16px; height: 16px; line-height: 16px;">
              <span class="vux-rater-inner">
                <img class="icon-font icon-ic_star_appraise" src="../../assets/星星.png" >
              </span>
            </a>
          </div>
          <span class="doctor-info-item-star active">{{ doctor.star_answer.star }}</span>
        </div>
        <div class="doctor-info-item">
          <span class="doctor-info-item-count">{{ doctor.doctor_info.request_time }}</span>
          <span class="doctor-info-item-unit">分钟 内响应</span>
        </div>
        <div class="doctor-info-item">
          <span class="doctor-info-item-count">{{ doctor.star_answer.answer }}</span>
          <span class="doctor-info-item-unit">月回答</span>
        </div>
      </div>
      <!--医生标签-->
      <div class="doctor-tag">
        <div class="doctor-tag-item" v-for="(item, key) in doctor.doctor_info.label" :key="key"> {{ item.name }} </div>
      </div>
      <div class="profile-questions">
        <div class="profile-title">擅长方向</div>
        <div class="question-tab">
          <div class="question-tab-item"> 全部({{ doctor.illness_length }}) </div>
          <div class="question-tab-item" v-for="(item, key) in doctor.doctor_info.illness" :key="key"> {{ item.name }}(待开发) </div>
        </div>
        <div class="public-question">
          <div class="public-question-title">
            <div class="dxd-avatar dxd-avatar-circle" style="width: 20px; height: 20px;">
              <img src="https://img1.dxycdn.com/2020/0224/710/3398348946228434991-22.png">
            </div>
            <span class="public-question-username">走***忆</span>
          </div>
          <div class="public-question-content">症状及患病时长：之前便秘问过<br><br>就医及用药情况：现在宝宝吃的荷兰牛栏 加辅食 米粉蔬菜红萝卜 吃了一点香蕉猕猴桃<br><br>需要解答的问题：这里两三天没拉了。今天拉了四次一点点 晚上用香油就拉了成条大便。这是什么原因。 可以怎么缓解呀 害怕便秘又肛裂。<br>视频是前段时间的粑粑</div>
          <div class="public-question-time">
            <span>11月4日 20:49</span>
            <span>6人看过</span>
          </div>
        </div>
        <div class="public-question">
          <div class="public-question-title">
            <div class="dxd-avatar dxd-avatar-circle" style="width: 20px; height: 20px;">
              <img src="https://img1.dxycdn.com/2020/0224/710/3398348946228434991-22.png">
            </div>
            <span class="public-question-username">蔡***N</span>
          </div>
          <div class="public-question-content">症状及患病:新生儿便秘<br><br>就医及用药情况：10.14出生，因为有黄疸，医院开了培菲康吃了10天，一开始每天拉四五次，最后变成一天两次，一天一次，人工干预了一下，棉签弄抚触油塞肛门拉出来的虽然不是羊屎蛋，但是也比较干燥，就把培菲康停了，10.29宝宝便秘了，棉签在肛门口搞出了比较干燥的便便，吃了合生元，合生元吃了一包分两次，又拉了五六次，害怕了就停了，10.30开始吃bb12，大便每天稳定在2-3次，今天又开始便秘了，宝宝拉出了比较干燥的成型的大便，但是不多也不算羊屎蛋，又痛苦的大哭<br>胃口也很好，睡眠就是白天容易落地醒，睡小床不安稳，和我睡一起还可以睡个2个多小时，一天奶量600-700毫升，晚上3小时醒一次<br>需要解答的问题：<br>喝的是雀巢的水解奶粉能恩全护，昨天大便还挺正常，不知道是不是和我泡水用了46度有关，之前都是用42度，上一次便秘好像也是因为觉得天冷了用了45度的水，但是因为有益生菌加持，所以不确定，现在宝宝的肛周也很红，想拉屎又拉不出来，棉签干预也没用<br>出生体重6.5斤，今天第21天宝宝8斤<br>现在不确定是奶粉问题还是牛奶蛋白过敏，黄色是昨天的，绿色是前天的</div>
          <div class="public-question-time">
            <span>11月4日 19:19</span>
            <span>7人看过</span>
          </div>
        </div>
      </div>
      <div class="profile-title">患者评价</div>
      <div class="comment">
        <div class="comment-title">
          <span class="comment-username">悦***爸</span>
          <div class="vux-rater">
            <a class="vux-rater-box is-active" style="color: rgb(255, 170, 0); margin-right: 2px; font-size: 10px; width: 10px; height: 10px; line-height: 10px;">
              <span class="vux-rater-inner">
                <img class="icon-font icon-ic_star_appraise" src="../../assets/星星.png" >
              </span>
            </a>
            <a class="vux-rater-box is-active" style="color: rgb(255, 170, 0); margin-right: 2px; font-size: 10px; width: 10px; height: 10px; line-height: 10px;">
              <span class="vux-rater-inner">
                <img class="icon-font icon-ic_star_appraise" src="../../assets/星星.png" >
              </span>
            </a>
            <a class="vux-rater-box is-active" style="color: rgb(255, 170, 0); margin-right: 2px; font-size: 10px; width: 10px; height: 10px; line-height: 10px;">
              <span class="vux-rater-inner">
                <img class="icon-font icon-ic_star_appraise" src="../../assets/星星.png" >
              </span>
            </a>
            <a class="vux-rater-box is-active" style="color: rgb(255, 170, 0); margin-right: 2px; font-size: 10px; width: 10px; height: 10px; line-height: 10px;">
              <span class="vux-rater-inner">
                <img class="icon-font icon-ic_star_appraise" src="../../assets/星星.png" >
              </span>
            </a>
            <a class="vux-rater-box" style="color: rgb(255, 170, 0); margin-right: 2px; font-size: 10px; width: 10px; height: 10px; line-height: 10px;">
              <span class="vux-rater-inner">
                <img class="icon-font icon-ic_star_appraise" src="../../assets/星星.png" >
              </span>
            </a>
          </div>
        </div>
        <div class="comment-content limit">李主任解答非常有耐心，专业并且通俗易懂，很好地及时地解答了疑问，很大程度上消除了新手爸妈的紧张，给喂养有很明确可行地指导。十分感谢</div>
        <div class="comment-time">昨天 18:17</div>
      </div>
      <div class="comment">
        <div class="comment-title">
          <span class="comment-username">d***2</span>
          <div class="vux-rater">
            <a class="vux-rater-box is-active" style="color: rgb(255, 170, 0); margin-right: 2px; font-size: 10px; width: 10px; height: 10px; line-height: 10px;">
              <span class="vux-rater-inner">
                <img class="icon-font icon-ic_star_appraise" src="../../assets/星星.png" >
              </span>
            </a>
            <a class="vux-rater-box is-active" style="color: rgb(255, 170, 0); margin-right: 2px; font-size: 10px; width: 10px; height: 10px; line-height: 10px;">
              <span class="vux-rater-inner">
                <img class="icon-font icon-ic_star_appraise" src="../../assets/星星.png" >
              </span>
            </a>
            <a class="vux-rater-box is-active" style="color: rgb(255, 170, 0); margin-right: 2px; font-size: 10px; width: 10px; height: 10px; line-height: 10px;">
              <span class="vux-rater-inner">
                <img class="icon-font icon-ic_star_appraise" src="../../assets/星星.png" >
              </span>
            </a>
            <a class="vux-rater-box is-active" style="color: rgb(255, 170, 0); margin-right: 2px; font-size: 10px; width: 10px; height: 10px; line-height: 10px;">
              <span class="vux-rater-inner">
                <img class="icon-font icon-ic_star_appraise" src="../../assets/星星.png" >
              </span>
            </a>
            <a class="vux-rater-box" style="color: rgb(255, 170, 0); margin-right: 2px; font-size: 10px; width: 10px; height: 10px; line-height: 10px;">
              <span class="vux-rater-inner">
                <img class="icon-font icon-ic_star_appraise" src="../../assets/星星.png" >
              </span>
            </a>
          </div>
        </div>
        <div class="comment-content limit">我先来试试医生都方法，后面一个月后看效果，谢谢。</div>
        <div class="comment-time">11月2日 13:36</div>
      </div>
      <div class="profile-more">
        <div class="profile-more-nav"> 更多11405个评价 </div>
      </div>
      <div class="profile-trust">
        <img src="../../assets/丁香.png" alt="丁香医生">
      </div>
      <div class="profile-bottom iphone-x">
        <div class="profile-bottom-bbtn_status" v-if="doctor.doctor_info.status == 0 || doctor.doctor_info.status == 2">
          <div class="profile-bottom-bbtn-normal" disabled="disabled"> {{ doctor.doctor_info.get_status_display }} </div>
        </div>
        <div class="profile-bottom-bbtn" v-if="doctor.doctor_info.status == 1">
          <div class="profile-bottom-bbtn-normal" @click="toQuestion"> 向{{ doctor.doctor_info.name }}医生提问（￥{{ doctor.doctor_info.price }}） </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref, watch, onMounted} from "vue";
import doctor from "../../api/doctor.js";
import settings from "../../settings.js";
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter, useRoute} from "vue-router";
const router = useRouter()
const route = useRoute()

onMounted(()=>{
  const id = route.query.id
  doctor.get_doctor_info(id)
  doctor.get_star_answer(id)
  doctor.get_answer_length(id)
})



const open = () => {
  ElMessageBox.confirm(
      '登录后才可以进行后续操作',
      {
        confirmButtonText: '去登录',
        cancelButtonText: '取消',
        center: true,
        customStyle: {
          width: '250px' /* 你想要的宽度 */
        }
      }
  )
      .then(() => {
          router.push('/login')
      })
      .catch(() => {
        console.log("取消登录")
      })
}
const toQuestion=()=>{
  let token = sessionStorage.access_token || localStorage.access_token;
  if (token == null || token === "" || token == undefined){
    open()
    return false
  }
  localStorage.setItem("doctor_id", doctor.doctor_id)
  localStorage.setItem("doctor_price", doctor.doctor_info.price)
  router.push('/question')
}

</script>
<style scoped>
*{
  margin: 0;
  padding: 0;
}
div {
  display: block;
  unicode-bidi: isolate;
}
.doctor_main{
  width: 768px;
  height: 1560px;
  background-color: white;
  margin: 0 auto;
}
.doctor_header{
  border: 0;
  padding: 20px 16px 10px;
  color: #333;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.14;
  background-color: #fff;
}
.doctor-card-wrapper{
  position: relative;
}
.doctor-introduction{
  min-height: 97px;
  margin-right: 80px;
}
.doctor-name {
  margin-bottom: 32px;
  font-weight: 600;
  font-size: 30px;
  line-height: 1.07;
}
.doctor-section {
  margin-bottom: 6px;
}
.doctor-section span:not(:last-child) {
  margin-right: 6px;
}
.doctor-hospital span {
  vertical-align: middle;
}
.doctor-hospital-tag {
  display: inline-block;
  margin-right: 6px;
  padding: 2px;
  color: grey;
  font-size: 12px;
  line-height: 1.17;
  background-color: #ebebeb;
  border-radius: 2px;
}
.doctor-avatar {
  position: absolute;
  top: 0;
  right: 0;
  text-align: center;
}
.dxd-avatar {
  position: relative;
  border-radius: 4px;
}
.dxd-avatar {
  position: relative;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 60px;
  height: 60px;
  overflow: hidden;
}
.dxd-avatar img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.doctor-avatar-follow.active {
  color: #00c792;
}
.doctor-avatar-follow {
  display: inline-block;
  height: 27px;
  margin-top: 10px;
  padding: 0 12px;
  color: grey;
  font-weight: 500;
  font-size: 13px;
  line-height: 27px;
  text-align: center;
  background-color: #f5f5f5;
  border-radius: 13.5px;
  position: relative;
}
.doctor-description {
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-top: 10px;
}
.doctor-description-abstract {
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  flex-grow: 1;
  margin-right: 8px;
  display: -webkit-box;
  max-height: 44px;
  overflow: hidden;
  line-height: 22px;
  word-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.doctor-description-arrow {
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  font-size: 12px;
}
.icon-font {
  width: 1em;
  height: 1em;
  overflow: hidden;
  vertical-align: -.15em;
  fill: currentColor;
}
.doctor-info {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
  -webkit-align-items: baseline;
  -ms-flex-align: baseline;
  align-items: baseline;
  padding: 20px 16px 10px;
  color: #4d4d4d;
  font-weight: 300;
  font-size: 10px;
  line-height: 1.2;
}
.doctor-info-item:not(:last-child) {
  margin-right: 16px;
}
.vux-rater {
  display: inline-block;
  line-height: normal;
  text-align: left;
}
.vux-rater a:last-child {
  margin-right: 0 !important;
  padding-right: 2px !important;
}
.vux-rater a {
  display: inline-block;
  color: #ccc;
  text-align: center;
  cursor: pointer;
}
.vux-rater-box, .vux-rater-inner {
  position: relative;
}

.vux-rater-inner, .vux-rater-outer {
  display: inline-block;
}

.doctor-info-item-star.active {
  margin-left: 2px;
  color: #fa0;
  font-weight: 600;
  font-size: 20px;
  line-height: 1.1;
}
.doctor-info-item-count {
  margin-right: 2px;
  color: #4d4d4d;
  font-weight: 600;
  font-size: 20px;
  line-height: 1.1;
}
.doctor-tag {
  padding: 10px 16px 10px;
}
.doctor-tag-item:not(:last-child) {
  margin-right: 6px;
}
.doctor-tag-item {
  display: inline-block;
  margin-bottom: 6px;
  padding: 2px;
  color: #fa0;
  font-size: 12px;
  line-height: 1.17;
  background-color: #fffaf0;
  border-radius: 2px;
}
.profile-questions {
  margin-top: 24px;
}
.profile-title {
  padding: 20px 16px 10px;
  color: #333;
  font-weight: 600;
  font-size: 22px;
  line-height: 1.09;
}
.question-tab {
  margin-bottom: -12px;
  padding: 20px 16px 10px;
  background-color: #fff;
}
.question-tab-item:not(:last-child) {
  margin-right: 12px;
}
.question-tab-item {
  display: inline-block;
  margin-bottom: 12px;
  padding: 8px 12px;
  color: #4d4d4d;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.14;
  background-color: #fafafa;
  border-radius: 4px;
}
.public-question {
  padding: 20px 16px;
  background-color: #fff;
  position: relative;
}
.public-question-title {
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  color: #333;
  font-weight: 500;
  font-size: 17px;
  line-height: 1.12;
}
.dxd-avatar-circle, .dxd-avatar-circle:after {
  border-radius: 50%;
}
.dxd-avatar {
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
}
.dxd-avatar img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.public-question-username {
  margin-left: 6px;
}
.public-question-content {
  margin: 12px 0;
  color: #4d4d4d;
  font-weight: 300;
  font-size: 16px;
  display: -webkit-box;
  max-height: 66px;
  overflow: hidden;
  line-height: 22px;
  word-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.public-question-time {
  color: #999;
  font-weight: 300;
  font-size: 12px;
  line-height: 1.17;
}
.public-question-time span:first-child {
  margin-right: 12px;
}
.comment {
  padding: 20px 16px;
  background-color: #fff;
  position: relative;
}
.comment-title {
  color: #333;
  font-weight: 500;
  font-size: 17px;
  line-height: 1.12;
}
.comment-username {
  margin-right: 10px;
}
.comment-content.limit {
  display: -webkit-box;
  max-height: 66px;
  overflow: hidden;
  line-height: 22px;
  word-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.comment-content {
  margin-top: 12px;
  color: #4d4d4d;
  font-weight: 300;
  font-size: 16px;
}
.comment-time {
  margin-top: 12px;
  color: #999;
  font-weight: 300;
  font-size: 12px;
  line-height: 1.17;
}
.profile-more {
  margin: 20px 0 40px;
  text-align: center;
}
.profile-more-nav {
  display: inline-block;
  padding: 6px 12px;
  color: #00c792;
  font-weight: 500;
  font-size: 13px;
  line-height: 1.15;
  background-color: #f5f5f5;
  border-radius: 27px;
  position: relative;
}
.profile-trust img {
  display: block;
  width: 100%;
}
@supports (padding-top:env(safe-area-inset-bottom)) {
  .iphone-x {
    margin-bottom: env(safe-area-inset-bottom);
  }
}
.iphone-x {
  position: fixed;
  bottom: 0;
  width: 100%;
  max-width: 768px;
}
.profile-bottom-bbtn {
  display: -ms-flexbox;
  display: flex;
  max-width: 768px;
  height: 50px;
  color: #fff;
  font-size: 15px;
  line-height: 50px;
  text-align: center;
  background-color: #00c792;
}

.profile-bottom-bbtn div {
  background-color: #00c792;
}
.profile-bottom-bbtn div {
  -webkit-box-flex: 1;
  flex-grow: 1;
  min-width: 50%;
}

.profile-bottom-bbtn_status{
  display: -ms-flexbox;
  display: flex;
  max-width: 768px;
  height: 50px;
  color: #fff;
  font-size: 15px;
  line-height: 50px;
  text-align: center;
  background-color: #00c792;
}

.profile-bottom-bbtn_status div {
  background-color: #666;
}
.profile-bottom-bbtn_status div {
  -webkit-box-flex: 1;
  flex-grow: 1;
  min-width: 50%;
}
</style>